@inject('pictureService','App\Interfaces\PictureService')
@inject('activityService','App\Interfaces\ActivityService')
@inject('goodsService','App\Interfaces\GoodsService')
@inject('adService','App\Interfaces\AdService')
<html>
<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow">
    <meta name="googlebot" content="noimageindex">

    <meta name="copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">
    <meta name="format-detection" content="email=no">

    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>专题-{{$SEO['title']}}</title>

    <link rel="stylesheet" href="../mobile/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../mobile/css/app.css">
    <style>
        .banner {
            background: url("{{$pictureService::thumb($activity->m_bg_img)}}");
            background-position:center center;
            background-repeat:no-repeat;
            background-size: auto 150px ;
        }
    </style>
</head>
<body>


        <!--焦点图-->
<div class="banner" ><a href="#"></a></div>

<!--分类导航-->
<?php
$activityCats = $activityService->getActivityCat($id);
?>
@if($activityCats->toArray())
<?php
$firstGoods = $activityService->getActivityGoods($activityCats[0]->id);
?>
<div class="navbar-static">
    <nav class="J-nav navbar navbar-default">
        <div class="navbar-collapse">
            <ul id="navList" class="nav navbar-nav">
                {{--<li class="active"><a href="#">分类1</a></li>--}}
                    @foreach ($activityCats as $k=>$activityCat)
                    <li @if($k == 0) class="active" @endif>
                        <a onclick="exchange(this, '{{$activityCat->id}}')">{{$activityCat->cat_name}}</a>
                    </li>
                    @endforeach
            </ul>
        </div>
    </nav>
</div>
<!--商品列表-->
<div class="J-list container-fluid goods-list">
    @foreach($firstGoods as $index=>$goods)
        @if($index % 2 == 0)
            <div class="row">@endif
                <div class="col-xs-6">
                    <div class="goods-box">
                        <a href="afu://goods/{{$goods->goods_id}}">
                            <img class="img" src="{{$pictureService::thumb($goods->goods_thumb,254,254)}}"
                                 alt="{{$goods->goods_name}}">
                        </a>
                        <div class="txt-box">
                            <a class="name" href="afu://goods/{{$goods->goods_id}}">{{$goods->goods_name}}</a>
                            <div><span class="character">￥</span><span class="price">{{$goods->shop_price}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                @if($index % 2 != 0 || $index + 1 == count($firstGoods))</div>@endif
    @endforeach
</div>

@else
<div class="navbar-static">
    <nav class="J-nav navbar navbar-default">
        <div class="navbar-collapse">
            <ul id="navList" class="nav navbar-nav">
                {{--<li class="active"><a href="#">分类1</a></li>--}}
                    @foreach ($activityCats as $k=>$activityCat)
                    <li @if($k == 0) class="active" @endif>
                        <a onclick="exchange(this, '{{$activityCat->id}}')">{{$activityCat->cat_name}}</a>
                    </li>
                    @endforeach
            </ul>
        </div>
    </nav>
</div>
@endif

        <!--商品模板-->
<script id="tpl" type="text/html">
    <div class="col-xs-6">
        <div class="goods-box">
            <a href="afu://goods/${goods_id}">
                <img class="img" src="${mobile_goods_thumb}@!254-254" alt="${goods_name}">
            </a>
            <div class="txt-box">
                <a class="name" href="afu://goods/${goods_id}">${goods_name}</a>
                <div><span class="character">￥</span><span class="price">${shop_price}</span></div>
            </div>
        </div>
    </div>
</script>

<!--依赖js-->
<script src="../mobile/js/zepto.min.js"></script>
<script src="../mobile/js/app.js"></script>

<script>

    //设置导航的宽度
    var navList = document.getElementById('navList');
    var lis = navList.getElementsByTagName('li');
    var width = 0;
    var isLoading = false;
    var page = 1;
    var tpl = $('#tpl').html();

    for (var i = 0; i < lis.length; i++) {
        var childLi = lis[i], w = 0;
        w = childLi.offsetWidth;
        width += w;
    }
    navList.style.width = width + 'px';

    function exchange(ele, id) {
        $(ele).parent().siblings().removeClass("active");
        $(ele).parent().addClass("active");
        $.ajax({
            url: '/api/activity/get_activity_cat_goods/' + id,
            dataType: 'json',
            type: 'post',
            data: {},
            success: function (data) {
                console.log(data);
                var html = [];
                var on_sale_goods = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i]['is_on_sale'] == 1) on_sale_goods.push(data[i])
                }
                for (var x = 0; x < on_sale_goods.length; x++) {
                    if (x % 2 == 0) html.push('<div class="row">');
                    html.push(htmlTemplate(tpl, on_sale_goods[x]));
                    if (x % 2 != 0 || x + 1 == on_sale_goods.length) html.push('</div>');
                }
                $('.J-list').html(html.join("\n"));
            }
        })
    }
</script>
</body>
</html>